/* eslint-disable indent */
<template>
    <div class="template-box">
        <div class="tem" v-if="temType === '3-2'">
            <el-row :gutter="0" style="height: 50%">
                <el-col :span="8"><ChartBox @chartConfig="makeSureItem" :sort="1" /></el-col>
                <el-col :span="8"><ChartBox @chartConfig="makeSureItem" :sort="2" /></el-col>
                <el-col :span="8"><ChartBox @chartConfig="makeSureItem" :sort="3" /></el-col>
            </el-row>
            <el-row style="height: 50%">
                <el-col :span="12"><ChartBox @chartConfig="makeSureItem" :sort="4" /></el-col>
                <el-col :span="12"><ChartBox @chartConfig="makeSureItem" :sort="5" /></el-col>
            </el-row>
        </div>
        <div class="tem" v-if="temType === '2-2'">
            <el-row :gutter="0" style="height: 50%">
                <el-col :span="12"><ChartBox @chartConfig="makeSureItem" :sort="1" /></el-col>
                <el-col :span="12"><ChartBox @chartConfig="makeSureItem" :sort="2" /></el-col>
            </el-row>
            <el-row style="height: 50%">
                <el-col :span="12"><ChartBox @chartConfig="makeSureItem" :sort="3" /></el-col>
                <el-col :span="12"><ChartBox @chartConfig="makeSureItem" :sort="4" /></el-col>
            </el-row>
        </div>
        <div class="tem" v-if="temType === '2-1'">
            <el-row :gutter="0" style="height: 50%">
                <el-col :span="12"><ChartBox @chartConfig="makeSureItem" :sort="1" /></el-col>
                <el-col :span="12"><ChartBox @chartConfig="makeSureItem" :sort="2" /></el-col>
            </el-row>
            <el-row style="height: 50%">
                <el-col :span="24"><ChartBox @chartConfig="makeSureItem" :sort="3" /></el-col>
            </el-row>
        </div>
        <!-- 功能按键 -->
        <div>
            <el-button @click="checkConfig" type="primary">保存</el-button>
        </div>
        <el-dialog title="新增页面" v-model="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="页面中文名：">
                    <el-input v-model="form.cnName" @input="ipt" placeholder="请输入中文名" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="页面英文名：">
                    <el-input v-model="form.enName" placeholder="请输入英文名" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="savePage">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import ChartBox from './chart-box.vue';

export default {
    components: {
        ChartBox,
    },
    computed: {
        temType() {
            return this.$store.state.temType;
        },
    },
    data() {
        return {
            chartConifg: {},
            sureMap: new Map(),
            temForNum: {
                '3-2': 5,
                '2-2': 4,
                '2-1': 3,
            },
            dialogFormVisible: false,
            form: {
                cnName: '',
                enName: '',
            },
            chartsConfigList: [],
        };
    },
    mounted() {},
    methods: {
        ipt(val) {
            console.log(val, this.form);
        },
        checkConfig() {
            this.dialogFormVisible = true;
        },
        makeSureItem(itemConfig) {
            this.sureMap.set(itemConfig.sort, itemConfig);
            if (this.sureMap.size === this.temForNum[this.temType]) {
                let sureList = Array.from(this.sureMap);
                sureList.sort((a, b) => {
                    return a[0] - b[0];
                });
                this.chartsConfigList = sureList.map((item) => {
                    return item[1].chartConfig;
                });
            }
            // console.log(this.sureMap.size, this.temForNum[this.temType]);
        },
        savePage() {
            const config = {};
            Object.assign(config, this.form, { chartsConfig: this.chartsConfigList });
            console.log('页面表达式', config);
        },
    },
};
</script>

<style lang="scss" scoped>
.template-box {
    width: calc(100% - 20px);
    height: 100%;
    margin: 0 10px;
    .tem {
        height: 100%;
    }
    // .chart-box {
    //     width: 100%;
    //     min-width: 300px;
    //     min-height: 150px;
    //     height: 100%;
    //     box-sizing: border-box;
    //     border: 1px solid #ccc;
    //     // padding: 10px;
    //     // background: cadetblue;
    // }
}
</style>
